<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        
        <link rel="shortcut icon" href="../img/favicon.ico">
        <title>HTML代码规范 - 代码规范</title>
        <link href="../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../css/font-awesome-4.5.0.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">
        <link rel="stylesheet" href="../css/highlight.css">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
	
	<script src="../js/jquery-1.10.2.min.js"></script>
        <script src="../js/bootstrap-3.0.3.min.js"></script>
        <script src="../js/highlight.pack.js"></script> 
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="..">代码规范</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
                <!-- Main navigation -->
                <ul class="nav navbar-nav">
                    <li >
                        <a href="..">Home</a>
                    </li>
                    <li >
                        <a href="../1.Java/">Java代码规范</a>
                    </li>
                    <li >
                        <a href="../2.JavaScript/">JavaScript代码规范</a>
                    </li>
                    <li >
                        <a href="../3.CSS/">CSS代码规范</a>
                    </li>
                    <li class="active">
                        <a href="./">HTML代码规范</a>
                    </li>
                </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" data-toggle="modal" data-target="#mkdocs_search_modal">
                        <i class="fa fa-search"></i> Search
                    </a>
                </li>
                    <li >
                        <a rel="next" href="../3.CSS/">
                            <i class="fa fa-arrow-left"></i> Previous
                        </a>
                    </li>
                    <li class="disabled">
                        <a rel="prev" >
                            Next <i class="fa fa-arrow-right"></i>
                        </a>
                    </li>
            </ul>
        </div>
    </div>
</div>

        <div class="container">
                <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
        <li class="main active"><a href="#html">HTML代码规范</a></li>
            <li><a href="#1">1. 通用约定</a></li>
            <li><a href="#2">2. 标签</a></li>
            <li><a href="#3-class-id">3. Class 与 ID</a></li>
            <li><a href="#4">4. 属性顺序</a></li>
            <li><a href="#5">5. 引号</a></li>
            <li><a href="#6">6. 嵌套</a></li>
            <li><a href="#7">7. 布尔值属性</a></li>
            <li><a href="#8">8. 语义化</a></li>
            <li><a href="#9-head">9. HEAD</a></li>
    </ul>
</div></div>
                <div class="col-md-9" role="main">

<h1 id="html">HTML代码规范</h1>
<p>v0.2</p>
<hr />
<h2 id="1">1. 通用约定</h2>
<p>尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。</p>
<h2 id="2">2. 标签</h2>
<ul>
<li>自闭合（self-closing）标签，无需闭合 ( 例如： <code>img</code> <code>input</code> <code>br</code> <code>hr</code> 等 )；</li>
<li>可选的闭合标签（closing tag），需闭合 ( 例如：<code>&lt;/li&gt;</code> 或 <code>&lt;/body&gt;</code> )；</li>
<li>尽量减少标签数量；</li>
</ul>
<pre><code class="html">&lt;img src=&quot;images/google.png&quot; alt=&quot;Google&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;title&quot;&gt;

&lt;ul&gt;
  &lt;li&gt;Style&lt;/li&gt;
  &lt;li&gt;Guide&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Not recommended --&gt;
&lt;span class=&quot;avatar&quot;&gt;
  &lt;img src=&quot;...&quot;&gt;
&lt;/span&gt;

&lt;!-- Recommended --&gt;
&lt;img class=&quot;avatar&quot; src=&quot;...&quot;&gt;
</code></pre>

<h2 id="3-class-id">3. Class 与 ID</h2>
<ul>
<li>class 应以功能或内容命名，不以表现形式命名；</li>
<li>class 与 id 单词字母小写，多个单词组成时，采用中划线<code>-</code>分隔；</li>
<li>使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；</li>
</ul>
<pre><code class="html">&lt;!-- Not recommended --&gt;
&lt;div class=&quot;j-hook left contentWrapper&quot;&gt;&lt;/div&gt;

&lt;!-- Recommended --&gt;
&lt;div id=&quot;j-hook&quot; class=&quot;sidebar content-wrapper&quot;&gt;&lt;/div&gt;
</code></pre>

<h2 id="4">4. 属性顺序</h2>
<p>HTML 属性应该按照特定的顺序出现以保证易读性。</p>
<ul>
<li>id</li>
<li>class</li>
<li>name</li>
<li>data-xxx</li>
<li>src, for, type, href</li>
<li>title, alt</li>
<li>aria-xxx, role</li>
</ul>
<pre><code class="html">&lt;a id=&quot;...&quot; class=&quot;...&quot; data-modal=&quot;toggle&quot; href=&quot;###&quot;&gt;&lt;/a&gt;

&lt;input class=&quot;form-control&quot; type=&quot;text&quot;&gt;

&lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;
</code></pre>

<h2 id="5">5. 引号</h2>
<p>属性的定义，统一使用双引号。</p>
<pre><code class="html">&lt;!-- Not recommended --&gt;
&lt;span id='j-hook' class=text&gt;Google&lt;/span&gt;

&lt;!-- Recommended --&gt;
&lt;span id=&quot;j-hook&quot; class=&quot;text&quot;&gt;Google&lt;/span&gt;
</code></pre>

<h2 id="6">6. 嵌套</h2>
<p><code>a 不允许嵌套 div</code>这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如<code>a 不允许嵌套 a</code>。</p>
<p>严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。</p>
<p><strong>语义嵌套约束</strong></p>
<ul>
<li><code>&lt;li&gt;</code> 用于 <code>&lt;ul&gt;</code> 或 <code>&lt;ol&gt;</code> 下；</li>
<li><code>&lt;dd&gt;</code>, <code>&lt;dt&gt;</code> 用于 <code>&lt;dl&gt;</code> 下；</li>
<li><code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code> 用于 <code>&lt;table&gt;</code> 下；</li>
</ul>
<p><strong>严格嵌套约束</strong></p>
<ul>
<li>inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;</li>
<li><code>&lt;a&gt;</code>里不可以嵌套交互式元素<code>&lt;a&gt;</code>、<code>&lt;button&gt;</code>、<code>&lt;select&gt;</code>等;</li>
<li><code>&lt;p&gt;</code>里不可以嵌套块级元素<code>&lt;div&gt;</code>、<code>&lt;h1&gt;~&lt;h6&gt;</code>、<code>&lt;p&gt;</code>、<code>&lt;ul&gt;/&lt;ol&gt;/&lt;li&gt;</code>、<code>&lt;dl&gt;/&lt;dt&gt;/&lt;dd&gt;</code>、<code>&lt;form&gt;</code>等。</li>
</ul>
<p>更多详情，参考<a href="http://www.smallni.com/element-nesting/">WEB标准系列-HTML元素嵌套</a></p>
<h2 id="7">7. 布尔值属性</h2>
<p>HTML5 规范中 <code>disabled</code>、<code>checked</code>、<code>selected</code> 等属性不用设置值。</p>
<pre><code class="html">&lt;input type=&quot;text&quot; disabled&gt;

&lt;input type=&quot;checkbox&quot; value=&quot;1&quot; checked&gt;

&lt;select&gt;
  &lt;option value=&quot;1&quot; selected&gt;1&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<h2 id="8">8. 语义化</h2>
<p>没有 <code>CSS</code> 的 <code>HTML</code> 是一个语义系统而不是 UI 系统。</p>
<p>通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套， 裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。-- 一丝</p>
<p>此外语义化的 <code>HTML</code> 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图。</p>
<h3 id="1_1">1) 常见标签语义</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>语义</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;p&gt;</code></td>
<td>段落</td>
</tr>
<tr>
<td><code>&lt;h1&gt; &lt;h2&gt; &lt;h3&gt; ...</code></td>
<td>标题</td>
</tr>
<tr>
<td><code>&lt;ul&gt;</code></td>
<td>无序列表</td>
</tr>
<tr>
<td><code>&lt;ol&gt;</code></td>
<td>有序列表</td>
</tr>
<tr>
<td><code>&lt;blockquote&gt;</code></td>
<td>大段引用</td>
</tr>
<tr>
<td><code>&lt;cite&gt;</code></td>
<td>一般引用</td>
</tr>
<tr>
<td><code>&lt;b&gt;</code></td>
<td>为样式加粗而加粗</td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td>为强调内容而加粗</td>
</tr>
<tr>
<td><code>&lt;i&gt;</code></td>
<td>为样式倾斜而倾斜</td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td>为强调内容而倾斜</td>
</tr>
<tr>
<td><code>code</code></td>
<td>代码标识</td>
</tr>
<tr>
<td><code>abbr</code></td>
<td>缩写</td>
</tr>
</tbody>
</table>
<h3 id="2_1">2) 示例</h3>
<p>将你构建的页面当作一本书，将标签的语义对应的其功能和含义；</p>
<ul>
<li>书的名称：<code>&lt;h1&gt;</code></li>
<li>书的每个章节标题: <code>&lt;h2&gt;</code></li>
<li>章节内的文章标题: <code>&lt;h3&gt;</code></li>
<li>小标题/副标题: <code>&lt;h4&gt; &lt;h5&gt; &lt;h6&gt;</code></li>
<li>章节的段落: <code>&lt;p&gt;</code></li>
</ul>
<h2 id="9-head">9. HEAD</h2>
<h3 id="1_2">1) 文档类型</h3>
<p>为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。</p>
<pre><code class="html">&lt;!DOCTYPE html&gt;
</code></pre>

<h3 id="2_2">2) 语言属性</h3>
<p>为什么使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考知乎上的讨论: <a href="http://www.zhihu.com/question/20797118">网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？</a></p>
<pre><code class="html">&lt;!-- 中文 --&gt;
&lt;html lang=&quot;zh-Hans&quot;&gt;

&lt;!-- 简体中文 --&gt;
&lt;html lang=&quot;zh-cmn-Hans&quot;&gt;

&lt;!-- 繁体中文 --&gt;
&lt;html lang=&quot;zh-cmn-Hant&quot;&gt;

&lt;!-- English --&gt;
&lt;html lang=&quot;en&quot;&gt;
</code></pre>

<h3 id="3">3) 字符编码</h3>
<ul>
<li>以utf-8作为文件编码;</li>
<li>指定字符编码的 meta 必须是 head 的第一个直接子元素</li>
</ul>
<pre><code class="html">&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    ......
  &lt;/head&gt;
  &lt;body&gt;
    ......
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h3 id="4-ie">4) IE 兼容模式</h3>
<p>优先使用最新版本的IE 和 Chrome 内核</p>
<pre><code class="html">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
</code></pre>

<h3 id="5-seo">5) SEO 优化</h3>
<pre><code class="html">&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
    &lt;!-- SEO --&gt;
    &lt;title&gt;Style Guide&lt;/title&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;your keywords&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;your description&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;author,email address&quot;&gt;
&lt;/head&gt;
</code></pre>

<h3 id="6-viewport">6) viewport</h3>
<ul>
<li><code>viewport</code>: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；</li>
<li><code>width</code>: 浏览器宽度，输出设备中的页面可见区域宽度；</li>
<li><code>device-width</code>: 设备分辨率宽度，输出设备的屏幕可见宽度；</li>
<li><code>initial-scale</code>: 初始缩放比例；</li>
<li><code>maximum-scale</code>: 最大缩放比例；</li>
</ul>
<p>为移动端设备优化，设置可见区域的宽度和初始缩放比例。</p>
<pre><code class="html">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
</code></pre>

<h3 id="7-ios">7) iOS 图标</h3>
<ul>
<li>apple-touch-icon 图片自动处理成圆角和高光等效果;</li>
<li>apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;</li>
</ul>
<pre><code class="html">&lt;!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --&gt;
&lt;link rel=&quot;apple-touch-icon-precomposed&quot; href=&quot;/apple-touch-icon-57x57-precomposed.png&quot;&gt;

&lt;!-- iPad，72x72 像素，可以没有，但推荐有 --&gt;
&lt;link rel=&quot;apple-touch-icon-precomposed&quot; href=&quot;/apple-touch-icon-72x72-precomposed.png&quot; sizes=&quot;72x72&quot;&gt;

&lt;!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --&gt;
&lt;link rel=&quot;apple-touch-icon-precomposed&quot; href=&quot;/apple-touch-icon-114x114-precomposed.png&quot; sizes=&quot;114x114&quot;&gt;

&lt;!-- Retina iPad，144x144 像素，可以没有，但推荐有 --&gt;
&lt;link rel=&quot;apple-touch-icon-precomposed&quot; href=&quot;/apple-touch-icon-144x144-precomposed.png&quot; sizes=&quot;144x144&quot;&gt;
</code></pre>

<h3 id="8-favicon">8) favicon</h3>
<p>在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：</p>
<ul>
<li>在 Web Server 根目录放置 favicon.ico 文件；</li>
<li>使用 link 指定 favicon；</li>
</ul>
<pre><code class="html">&lt;link rel=&quot;shortcut icon&quot; href=&quot;path/to/favicon.ico&quot;&gt;
</code></pre>

<h3 id="9-head_1">9) HEAD 模板</h3>
<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-cmn-Hans&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
    &lt;title&gt;Style Guide&lt;/title&gt;
    &lt;meta name=&quot;description&quot; content=&quot;不超过150个字符&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;name, email@gmail.com&quot;&gt;

    &lt;!-- 为移动设备添加 viewport --&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

    &lt;!-- iOS 图标 --&gt;
    &lt;link rel=&quot;apple-touch-icon-precomposed&quot; href=&quot;/apple-touch-icon-57x57-precomposed.png&quot;&gt;

    &lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;RSS&quot; href=&quot;/rss.xml&quot; /&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;path/to/favicon.ico&quot;&gt;
&lt;/head&gt;
</code></pre></div>
        </div>

        <footer class="col-md-12">
            <hr>
            <p>Documentation built with <a href="http://www.mkdocs.org/">MkDocs</a>.</p>
        </footer>
        <script>var base_url = '..';</script>
        <script data-main="../mkdocs/js/search.js" src="../mkdocs/js/require.js"></script>
        <script src="../js/base.js"></script><div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="Search Modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Search</h4>
            </div>
            <div class="modal-body">
                <p>
                    From here you can search these documents. Enter
                    your search terms below.
                </p>
                <form role="form">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search..." id="mkdocs-search-query">
                    </div>
                </form>
                <div id="mkdocs-search-results"></div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

    </body>
</html>
